<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单地图</title>
    <link rel="stylesheet" href='https://maps.epgis.com/api/epgis-1.5.0.css'/>
    <script type="text/javascript" src='https://maps.epgis.com/api/epgis-js-1.5.0.min.js'></script>

    <style>
        html, body, .mapClass{width:100%;height:100%;margin:0;}
    </style>
</head>
<body>
<div id="map" class="mapClass"></div>
<script>

    epgis.tokenTask.login('7b65df143ad533e8bb7faf9f4896c7af',"a8553e352b0c3a67993b5447dbd96914").then(function(){
        initMap();
    });

    function initMap(){

        //创建地图，指定底图样式类型
        var map = new epgis.Map({
            container: 'map',
            style:"aegis://styles/aegis/StreetsDark",
            zoom:13,
            center:[118.778074408,32.0572355018],
            localIdeographFontFamily:'Microsoft YoHei'
        });




        map.on("load", function (e) {
            //画小圆点
            map.addLayer({
                'id': "demo",
                "type": "circle",
                "source": {
                    "type": "geojson",
                    "data": {
                        'type': "FeatureCollection",
                        "features": []
                    }
                },
                "paint": {
                    "circle-radius": 8,
                    "circle-color": "#fff",
                    "circle-stroke-color": "#4aabf7",
                    "circle-stroke-width": 3
                }
            })

            //设置小圆点数据
            map.getSource("demo").setData({
                'type': "FeatureCollection",
                'features': [{
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [118.778074408,32.0572355018]
                    },
                    'properties': {
                        'name': "测试点"
                    }
                }]
            });



            //画图片点，需要先加载图片 图片路径在页面部署在服务上时可以用相对路径
            map.loadImage("https://maps.epgis.com/egis/images/markers_new2_4ab0bc5_78.png", function (error, image) {debugger;
                //添加图片到map，可以设置图片id
                map.addImage("poi", image);
                map.addLayer({
                    'id': "choicePoi",
                    "type": "symbol",
                    "source": {
                        "type": "geojson",
                        "data": {
                            'type': "FeatureCollection",
                            "features": []
                        }
                    },
                    "layout": {
                        "icon-image": "poi",
                        "icon-size": 1,
                        // "icon-anchor":"bottom",
                        //"icon-offset":[0,0],
                        "icon-ignore-placement": true,
                        "text-ignore-placement": false,
                        'text-field': '{name}',
                        'text-size': 32,
                        'text-anchor': 'top',
                        'text-allow-overlap': false,
                        'icon-anchor': "bottom",
                        'text-offset': [0, 0],
                        'text-max-width': 8,
                        "text-font": ['Microsoft YaHei Regular']
                    },
                    'paint': {
                        'text-color': "#555252",
                        'text-halo-color': "#FFFFFF",
                        'text-halo-width': 1.33333
                    }
                });

                map.getSource("choicePoi").setData({
                    'type': "FeatureCollection",
                    'features': [{
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [118.788074408,32.0590355018]
                        },
                        'properties': {
                            'name': "测试点"
                        }
                    }]
                });

                //绑定点的弹窗
                var popupInfoWindow = new epgis.Popup({
                    closeButton: true,
                    closeOnClick: false,
                    offset: {
                        'bottom': [0, -34]
                    }
                });

                //监听点击事件
                map.on('click', "choicePoi", function (e) {
                    popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
                        .setHTML("<h1>" + e.features[0].properties.name + "</h1>")
                        .addTo(map);
                })
            });

            //画marker点
            var el = document.createElement('div');
            el.className = 'marker';
            el.style.backgroundImage = 'url("./egis/images/markers_new2_4ab0bc5_78.png")';
            el.style.width = '25px';
            el.style.height = '38px';

            new epgis.Marker(el, {
                anchor: 'bottom'
            })
                .setLngLat([118.778074408,32.0585355018])
                .addTo(map);
        });

        map.addControl(new epgis.ScaleControl({
            maxWidth: 80,
            unit: 'metric'
        }), 'bottom-left');

        // map.on("click",function(e){
        //     var features = map.queryRenderedFeatures(e.point);
        //     console.log(features);
        //     console.log(e);
        // });


    }


</script>
</body>
</html>